<template>
  <div>
    <h3>{{ count }}</h3>
    <button @click="changeCount">count++</button>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  // setup是组合式API的一个入口 是一个函数
  // setup函数的参数：props,ctx{attrs,sloat,emit} 第一个props 第二个上下文
  // setup函数里面没有this
  // setup中不管是属性还是方法 想用数据就得return返回出去

  setup(props, { attrs, sloat, emit }) {
    // let count = 10; // 不是响应式数据
    let count = ref(10);

    const changeCount = () => {
      console.log("触发了");
      console.log(count);
      count.value++; // 解包
    };

    // let arr = ref([]) // 可以定义数组

    return {
      count,
      changeCount,
    };
  },
};
</script>

<style scoped lang="scss"></style>
